<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: black;
        /* 背景色 */

    }

    .box {
        position: relative;
        /* 相对定位 */
        left: 0;
        top: 0;
        width: 1000px;
        height: 42px;
        margin: 50px auto;
        /* 居上50左右居中 */
        /* border: 1px #fff solid; */
        background: #fff url(./a2.png) no-repeat right;
        /* 背景颜色 url添加图片 no-repeat 不平铺  right 居右*/

    }

    .box>ul>li {
        float: left;
        /* 浮动 */
        width: 83px;
        height: 42px;
        text-align: center;
        /* 居中 */
        list-style: none;
         /* 取消默认 */
        line-height: 42px;
        /* 行高 */
        cursor: pointer;
         /* 变小手 */
    }

    .box>ul {
        position: absolute;
        top: 0;
        left: 0;
       
        z-index: 10;
         /* 改变层级关系 */
        list-style: none;
    }
/* 取消默认值，取消点 */
    .box>#s1 {
        position: absolute;
        left: 0;
        top: 0;
        width: 83px;
        height: 42px;
        background: url(./a1.gif) no-repeat center;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li>新闻首页</li>
            <li>新闻首页</li>
            <li>新闻首页</li>
            <li>新闻首页</li>
            <li>新闻首页</li>
            <li>新闻首页</li>
            <li>新闻首页</li>
            <li>新闻首页</li>
        </ul>
        <span id="s1"></span>
    </div>
</body>

<script>
    var lis = document.querySelectorAll("li")
    //      querySelectorAll选中所有的li
    var s1 = document.querySelector('#s1')
    //       querySelector表示选中s1
    var target = 0//目标值
    var leader = 0//步长
    var current = 0 //当前点击的位置
    lis.forEach((item, index) => {
        // item表示被选重的，index表示下标
        item.onmouseover = function () {
            // onmouseover表示经过触发事件
            // console.log(this.offsetLeft);
            target = this.offsetLeft
            // this事件的调用者现在指的是item最后赋值给target
        }
        item.onclick = function () {
            // 点击事件
            current = target
        }

        item.onmouseout = function () {
            // 鼠标离开触发事件
            target = current
        }
    })

    function fn() {
        leader = leader + (target - leader) / 10
        // 缓动公式固定的，leader步长，target目标值
        s1.style.left = leader + 'px'
    }
    setInterval(fn, 30)
    // 定时器，fn定义的，30表示时间的快慢
</script>

</html>